<template>
  <view>

    <!-- 如果没有数据 -->
    <view v-if="bodyData.totalElements===0">
      <view class="no-data-view">
        <view>
          <image
              class="no-data-img"
              :src="$kt.file.byPath('image/noHave.svg')">
          </image>
        </view>
      </view>
    </view>

    <view
        v-for="item in bodyData.content"
        class="in-box"
        @click="$kt.router.navTo('/pages/clockDetail/clockDetail', {id: item.id})"
    >

      <u-row>
        <u-col :span="1">
          <image
              v-if="item.type===1"
              :src="$kt.file.byPath('image/into.svg')"
              mode="aspectFill"
              class="clock-type-img"
          ></image>
          <image
              v-if="item.type===2"
              :src="$kt.file.byPath('image/out.svg')"
              mode="aspectFill"
              class="clock-type-img"
          ></image>
        </u-col>
        <u-col :span=".2"></u-col>
        <u-col :span="10">
          <view class="clock-type-view">
            <text v-if="item.type === 1">{{ "Clock In" }}</text>
            <text v-else>{{ "Clock Out" }}</text>
          </view>
          <view style="height: 10rpx"></view>

          <view class="time-text">
            {{ $kt.date.format(item.gmtClock, 'yyyy-MM-dd hh:mm:ss') }}
          </view>
        </u-col>
      </u-row>


    </view>

    <view v-if="bodyData.totalElements>requestParam.pageSize">
      <!-- 查看更多 -->
      <view class="more-view" @click="searchBySelf">
        <text class="more-btn">{{ "➠" }}{{ "More" }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bodyData: {
        content:[],
        totalElements: 0
      },
      requestParam: {
        data:{
          enterpriseId: this.$emp.getCurrentEnterprise().id
        },
        pageSize: 5,
        pageNumber: 1
      }
    };
  },
  mounted() {
    this.searchBySelf();
  },
  methods: {
    searchBySelf() {
      if(this.$kt.storage.get('empClockBodyData')){
        alert(this.$kt.storage.get('empClockBodyData'));
        this.bodyData = this.$kt.storage.get('empClockBodyData');
      }
      this.$kt.request.send({
        uri: '/business-erp-web/empClock/searchBySelf',
        data: this.requestParam,
        stateSuccess: res => {
          this.bodyData = res.data;
          this.$kt.storage.set('empClockBodyData', this.stateCode);
        },
        stateFail: err => {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.in-box {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin: 30rpx 0;
}

.time-text {
  font-size: 28rpx;
  color: #666666;
}

.clock-type-view {
}

.tag {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #000000;
  color: #fef0f0;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}

.more-view {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  margin-top: 40rpx;
  color: #000000;
}

.more-btn:active {
  opacity: .5;
}

.no-data-img {
  width: 200rpx;
  height: 300rpx;
}

.no-data-view {
  width: 100%;
  text-align: center
}

.clock-type-img{
  width: 50rpx;
  height: 50rpx;
}

.in-box:active{
  opacity: .6;
}

</style>
